<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <title>TEST</title>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">	
	<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">
	
	<link rel="stylesheet" href="//cdn.bootcss.com/weui/0.4.3/style/weui.css">
	<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.css">
	<link rel="stylesheet" href="stylesheets/weui.css">
	<style type="text/css">
	.weui-pull-to-refresh{
		top:0px!important;
		width:100%;
		}
	.demo-top{
		height:10%;
		background:#545356;
		padding:1%;
		color:#fff;
	}
	.demo-top-col{
		height:100%;
		padding-left:10px;
	}
	.demo-col-border{
		border-right:1px dashed #fff;
	}
	.demo-center{
		height:88%;
	}
	.demo-input-date{
	    height: 100%;
   		width: 100%;
    	background: #545356;
    	border:none;
    	color:#fff; 
    	font-size:20px;
	}
	.demo-money{
		margin-top: 5px;
	    font-size: 20px;
	}
	.demo-money-title{
		margin-top: 5px;
	    font-size: 12px;
	}
	</style>
  </head>
  <body>
  	<div class="weui-row weui-no-gutter demo-top">
	  <div class="weui-col-33 demo-top-col demo-col-border">
  	      <input id="inp-date" type="text" class="demo-input-date"/>
	  </div>
	  <div class="weui-col-33 demo-top-col">
		  <div class="demo-money-title">支出(元)</div>
		  <div class="demo-money">11111.11</div>
	  </div>
	  <div class="weui-col-33 demo-top-col">
		   <div class="demo-money-title">收入(元)</div>
		  <div class="demo-money">11111.11</div>
	  </div>
	</div>
 	<div class="demo-center">
		<div class="weui_tab">
		    <div class="weui_tab_bd">
			    <div id="tab1" class="weui-pull-to-refresh weui_tab_bd_item weui_tab_bd_item_active">
				     <div class="weui-pull-to-refresh-layer">
				      <div class='pull-to-refresh-arrow'></div>
				      <div class='pull-to-refresh-preloader'></div>
				      <div class="down">下拉刷新</div>
				      <div class="up">释放刷新</div>
				      <div class="refresh">正在刷新</div>
				    </div>
				    1111
			    </div>
			    <div id="tab2" class="weui_tab_bd_item">
			      <h1 class="doc-head">通讯录</h1>
			    </div>
			    <div id="tab3" class="weui_tab_bd_item">
			      <h1 class="doc-head">发现</h1>
			    </div>
			    <div id="tab4" class="weui_tab_bd_item">
			      <h1 class="doc-head">我的</h1>
			    </div>
		    </div>
		    <div class="weui_tabbar">
	        <a href="#tab1" class="weui_tabbar_item weui_bar_item_on">
	          <div class="weui_tabbar_icon">
	            <img src="./images/icon_nav_button.png" alt="">
	          </div>
	          <p class="weui_tabbar_label">明细</p>
	        </a>
	        <a href="#tab2" class="weui_tabbar_item">
	          <div class="weui_tabbar_icon">
	            <img src="./images/icon_nav_msg.png" alt="">
	          </div>
	          <p class="weui_tabbar_label">记账</p>
	        </a>
	        <a href="#tab3" class="weui_tabbar_item">
	          <div class="weui_tabbar_icon">
	            <img src="./images/icon_nav_article.png" alt="">
	          </div>
	          <p class="weui_tabbar_label">报表</p>
	        </a>
	        <a href="#tab4" class="weui_tabbar_item">
	          <div class="weui_tabbar_icon">
	            <img src="./images/icon_nav_cell.png" alt="">
	          </div>
	          <p class="weui_tabbar_label">我</p>
	        </a>
	      </div>
		</div>
	</div>
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<script src="//cdn.bootcss.com/jquery-weui/0.8.0/js/jquery-weui.min.js"></script>
	<!-- <script src="//cdn.bootcss.com/jquery-weui/0.8.0/js/swiper.min.js"></script>
	<script src="//cdn.bootcss.com/jquery-weui/0.8.0/js/city-picker.min.js"></script> -->
	<script>
		$("#tab1").pullToRefresh().on("pull-to-refresh", function() {
	        setTimeout(function() {
	          $("#tab1").pullToRefreshDone();
	        }, 2000);
	      });
		 var date=new Date;
		 var year=date.getFullYear(); 
		 var month=date.getMonth()+1;
		 month =(month<10 ? "0"+month:month); 
		 var mydate = (year.toString()+"-"+month.toString());
		$("#inp-date").val(mydate).calendar({
			dateFormat:'yyyy-mm',
			maxDate:date,
			onChange:function (p, values, displayValues){
				console.log(displayValues);
			}
		});
	</script>
  </body>
</html>